<template>
  <div style="height: 100%;display: flex; flex-direction: column;justify-content: space-between;">
    <nut-form label-position="top" :rules="rules" ref="routineRef" :model-value="routineFormData">
      <nut-form-item :label="t('home_page_oldPassword')" prop="old_password" :required="false">
        <nut-input v-model="routineFormData.old_password" :placeholder="t('home_page_enterOldPassword')"
          :type="eyeOpen1 ? 'text' : 'password'" clearable>
          <template #right>
            <iconpark-icon @click="eyeOpen1 = !eyeOpen1" :color="eyeOpen1?'#A8A8CA':'#504F6F'" :icon-id="eyeOpen1 ? 'show' : 'hide'"
              size="1.3rem" class="mr-12"></iconpark-icon>
          </template>
        </nut-input>
      </nut-form-item>
      <nut-form-item :label="t('home_page_newPassword')" prop="new_password">
        <nut-input v-model="routineFormData.new_password" :placeholder="t('home_page_enterNewPassword')"
          :type="eyeOpen2 ? 'text' : 'password'" clearable>
          <template #right>
            <iconpark-icon @click="eyeOpen2 = !eyeOpen2" :color="eyeOpen2?'#A8A8CA':'#504F6F'" :icon-id="eyeOpen2 ? 'show' : 'hide'"
              size="1.3rem" class="mr-12"></iconpark-icon>
          </template>
        </nut-input>
      </nut-form-item>
      <nut-form-item :label="t('home_page_enterAgainNewPassword')" prop="new_password_confirm">
        <nut-input v-model="routineFormData.new_password_confirm" :placeholder="t('home_page_enterAgainNewPassword')"
          :type="eyeOpen3 ? 'text' : 'password'" clearable>
          <template #right>
            <iconpark-icon @click="eyeOpen3 = !eyeOpen3" :color="eyeOpen3?'#A8A8CA':'#504F6F'" :icon-id="eyeOpen3 ? 'show' : 'hide'"
              size="1.3rem" class="mr-12"></iconpark-icon>
          </template>
        </nut-input>
      </nut-form-item>
    </nut-form>
    <div class="submit_wrap">
      <nut-button class="submit" @click="submit">{{ t("btn_label_submit") }}</nut-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import {routineFormData, routineRef, passwordValidator} from "../../commonHooks";
import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";
import { verifyPassword } from "@/utils/validateTools";
import { useI18n } from "vue-i18n";
import { ref } from "vue";
const eyeOpen1 = ref(false);
const eyeOpen2 = ref(false);
const eyeOpen3 = ref(false);

const { t } = useI18n();

const passwordValidator1 = (val: any) => {
  if (!val) {
    return Promise.reject(t("home_page_enterPassword"));
  } else if (!verifyPassword(val)) {
    return Promise.reject(t("home_page_passwordFormatIncorrect"));
  } else if (val != routineFormData.value.new_password) {
    return Promise.reject(t("home_page_passwordsInconsistent"));
  } else {
    return Promise.resolve();
  }
};
// const { routineFormData, routineRef, passwordValidator } = commonHooks();

const rules = {
  old_password: [{ validator: passwordValidator }],
  new_password: [{ validator: passwordValidator }],
  new_password_confirm: [{ validator: passwordValidator1 }],
};

const submit = () => {
  routineRef.value?.validate().then(({ valid, errors }: any) => {
    if (valid) {
      const query = NetPacket.req_reset_account_password();
      query.new_password = routineFormData.value.new_password;
      query.old_password = routineFormData.value.old_password;
      query.new_password_confirm = routineFormData.value.new_password_confirm;
      query.operate_type = 2;
      query.modify_type = 1;
      PKwebsocket.instance.send(query, true)
    } else {
      console.warn("error:", errors);
    }
  });
};
</script>

<style lang="scss" scoped>
.submit_wrap{
  margin-bottom: 26px;
}


</style>
